<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IGMVC.Web.Models.IssueEntryForm>" %>
<%@ Register Assembly="Infragistics4.WebUI.WebHtmlEditor.v10.2, Version=10.2.20102.2002, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" Namespace="Infragistics.WebUI.WebHtmlEditor" TagPrefix="ighedit" %>
<%@ Register Assembly="Infragistics4.Web.v10.2, Version=10.2.20102.2002, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" Namespace="Infragistics.Web.UI.ListControls" TagPrefix="ig" %>
<%@ Register assembly="Infragistics4.Web.v10.2, Version=10.2.20102.2002, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" namespace="Infragistics.Web.UI.EditorControls" tagprefix="ig" %>
<%@ Register assembly="Infragistics.Web.Mvc" namespace="Infragistics.Web.Mvc" tagprefix="cc1" %>

<%-- 
    The WebDropDownList needs to be data bound using the Page_Load method
--%>
<script type="text/C#" runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        this.IssueTypeId.DataSource = this.Model.IssueTypes;
        this.IssueTypeId.DataBind();

        this.Severity.MinValue = this.Model.SeverityMin;
        this.Severity.MaxValue = this.Model.SeverityMax;
    }
</script>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	New Issue
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
<style type="text/css">
label 
{
    display:block;
    margin-top:20px;
}
input[type="text"] 
{
    width:655px;
}
.shy-input input 
{
    width:200px;
    border:0px;
}
</style>
<script type="text/javascript">
    function map() {
        $get("IssueTypeId").value = $find("<%= IssueTypeId.ClientID %>").get_selectedItem().get_value();
    }
</script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>New Issue</h2>
    <% using (Html.BeginForm("Persist", "Issues")){ %>
    <%= Html.Hidden("IssueTypeId") %>
    
    <label for="Title">Title:</label>
    <%= Html.TextBox("Title")%>
    
    <label>Type:</label>
    <ig:WebDropDown ID="IssueTypeId" 
        EnableViewState="false"
        CurrentValue="[ Select One ]"
        Width="200px" 
        EnableAnimations="false" 
        CssClass="shy-input"
        TextField="Title" 
        DisplayMode="DropDownList" 
        ValueField="Id" runat="server">
        <ItemTemplate>
            <img src='<%# DataBinder.Eval(Container.DataItem, "ImageUrl") %>' alt='<%# DataBinder.Eval(Container.DataItem, "Title") %>' border="0" />
            <%# DataBinder.Eval(Container.DataItem, "Title") %>
        </ItemTemplate>
        <HeaderTemplate>[ Select One ]</HeaderTemplate>
    </ig:WebDropDown>
    
    <label for="Description">Description:</label>
    <ighedit:WebHtmlEditor 
        ID="Description" 
        Focus="false" 
        EnableViewState="False"
        runat="server" >
        <Toolbar>
            <ighedit:ToolbarButton runat="server" Type="Bold" />
            <ighedit:ToolbarButton runat="server" Type="Italic" />
            <ighedit:ToolbarButton runat="server" Type="Underline" />
            <ighedit:ToolbarButton runat="server" Type="Cut" />
            <ighedit:ToolbarButton runat="server" Type="Copy" />
            <ighedit:ToolbarButton runat="server" Type="Paste" />
            <ighedit:ToolbarButton runat="server" Type="Undo" />
            <ighedit:ToolbarButton runat="server" Type="Redo" />
        </Toolbar>
    </ighedit:WebHtmlEditor>
    
    <label for="Severity">Severity:</label>
    <ig:WebSlider ID="Severity" 
        ShowPlusMinusButtons="false" 
        LargeChangeAsString="1" 
        SmallChangeAsString="1" 
        ValueType="Int" 
        runat="server" 
        EnableViewState="False" >
        <Tickmarks NumberOfMinorTickmarks="1" />
    </ig:WebSlider>
    
    <br /><input type="submit" onclick="map();" value="Submit" />
    
    <% }%>
    
    <cc1:IGMvcScriptManager ID="sm" runat="server" />   
</asp:Content>

<asp:Content ContentPlaceHolderID="DescriptionContent" runat="server">
    <h3>On this Page</h3>
    <p>This page uses the 
        <a href="http://www.infragistics.com/dotnet/netadvantage/aspnet/webdropdown.aspx">WebDropDown</a>,
        <a href="http://www.infragistics.com/dotnet/netadvantage/aspnet/webhtmleditor.aspx#Overview">WebHTMLEditor</a>
        and the <a href="http://www.infragistics.com/dotnet/netadvantage/aspnet/webslider.aspx#Overview">WebSlider</a>.</p>

    <h4>Compensating for Generated ASP.NET ids</h4>
    <p>All of the existing versions of the ASP.NET Framework have required server controls
    to implement the <a href="http://msdn.microsoft.com/en-us/library/system.web.ui.inamingcontainer.aspx">INamingContainer</a> 
    interface. This interface is a marker used to tell the server control to look at the control 
    heirarchy and build a unique client Id for each control.</p>
    <p>ASP.NET MVC harnesses the concepts of model binders that are responsible for creating
    domain objects from data being passed into the controller action. One of the places the bindings
    looks for data is in the Request.Forms collection. With long and unpredictable ids being generated there
    two ways to create a binding scenario that will work with traditional server controls. The first 
    approach is to map data into known input elements before a post and the second involves creating
    a custom model binder that understands the ids being generated. This page implements both techniques.</p>
    <h5>Mapping Data</h5>
    <p>Some server controls do processing on the server side that is not available in a MVC application.
    The WebDropDown, for instance uses server logic to determine the selected value field of the drop
    down control. In this instance the easiest way to expose the selected value to the controller
    action is to map the selected value using JavaScript to a hidden input control where the developer
    has explicit control of the element's id. Once the value is mapped to this hidden input the 
    model binder picks up the value as expected.</p>
    <h5>Custom Model Binder</h5>
    <p>Wherever possible developers may choose to implement a custom model binder that knows how 
    to find the server controls based on the control ids that are generated by ASP.NET. This sample
    includes a custom model binder that looks for known keys in the element ids to provide data
    for a issue type.</p>
    <p><b>Note:</b> The need to create custom model binders for this purpose will disappear when ASP.NET 4 is
    available and developers have explicit control over server control client ids.</p>

</asp:Content>